<form nz-form [formGroup]="roleForm">
    <nz-alert nzBanner nzMessage="如果您正在更改自己的权限，则可能需要刷新页面（F5），以在您所做的权限更改生效！"></nz-alert>
    <nz-tabset>
        <nz-tab nzTitle="基本信息">
            <div nz-row nzGutter="8">
                <div nz-col nzSpan="24">
                    <nz-form-item>
                        <nz-form-label nzRequired nzFor="displayName">角色名称</nz-form-label>
                        <nz-form-control>
                            <input nz-input placeholder="角色名称" [(ngModel)]="role.displayName" formControlName="displayName"
                                minlength="" maxlength="64">
                            <nz-form-explain *ngIf="roleForm.get('displayName').dirty && roleForm.get('displayName').errors">请正确填写角色名称！</nz-form-explain>
                        </nz-form-control>
                    </nz-form-item>
                </div>
                <div nz-col nzSpan="24">
                    <div nz-row>
                        <div style="margin-bottom: 20px;" nz-col nzSpan="12"><label nz-checkbox formControlName="isDefault"
                                [(ngModel)]="role.isDefault">是否默认</label></div>
                    </div>
                </div>
            </div>
        </nz-tab>
        <nz-tab nzTitle="权限配置">
            <permission-tree #permissionTree></permission-tree>
        </nz-tab>
    </nz-tabset>
</form>

<div class="drawer_footer">
    <button type="button" (click)="close()" class="ant-btn" style="margin-right: 8px;"><span>取消</span></button>
    <button nz-button type="button" (click)="submitForm()" class="ant-btn ant-btn-primary" [nzLoading]="isLoadingBtn"><span>提交</span></button>
</div>